<template>
  <div class="workday_box">
    <div class="workday_box_tip">提示：自定义时间优先级高于工作日</div>
    <u-page-header title="工作日设置"></u-page-header>
    <div class="workday_box_com">
      <div class="workday_box_left">
        <el-select
          v-model="dateValue"
          class="m-2"
          placeholder="请选择"
          @change="selectDateValue"
        >
          <el-option
            v-for="item in dateOptions"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      <div class="workday_box_right">
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange($event)"
        >
          <el-checkbox
            v-for="(city, index) in cities"
            :label="city.name"
            :key="index"
            >{{ city.name }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="workday_box_btm">
        <el-button
          type="primary"
          @click="handleWork()"
          :loading="loading"
          icon="SuccessFilled"
          style="padding: 16px 28px; float: right"
          >保存</el-button
        >
      </div>
    </div>
    <el-row style="width: 100%">
      <el-col :span="24">
        <u-page-header
          title="自定义时间"
          style="margin-top: 16px"
        ></u-page-header
      ></el-col>
    </el-row>

    <el-row style="margin-top: 10px">
      <el-col :span="12">
        <el-button
          style="padding: 16px 28px"
          :disabled="multiple"
          @click="handleDelete"
        >
          删除
        </el-button>
      </el-col>
      <el-col :span="12">
        <el-button
          icon="Plus"
          style="padding: 16px 28px; float: right"
          type="primary"
          @click="addItem"
        >
          添加自定义时间
        </el-button>
      </el-col>
    </el-row>
    <el-table
      border
      v-loading="loading"
      :data="tableList"
      @selection-change="handleSelectionChange"
      style="margin-top: 16px; width: 100%; margin-bottom: 20px"
    >
      <el-table-column
        type="selection"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column label="日期" prop="dateChar" align="center" />
      <el-table-column label="状态" prop="status" align="center">
        <template #default="scope">
          <span>{{ scope.row.status == '1' ? '休息日' : '工作日' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        prop="htUrl"
        width="160"
        fixed="right"
      >
        <template #default="scoped">
          <el-button type="text" icon="Edit" @click="editItem(scoped.row)"
            >编辑
          </el-button>
          <el-button type="text" icon="Delete" @click="delItem(scoped.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <add-from
    v-if="isAdd"
    @closeDialog="closeDialog"
    @refreshList="refreshList"
  ></add-from>
  <edit-from
    v-if="isEdit"
    @closeDialog="closeDialog"
    :editForm="editForm"
    @refreshList="refreshList"
  ></edit-from>
</template>
<script setup name="workForm">
import {
  getWorkdayList,
  getWorkdaySave,
  getDefineDayList,
  delDefineDayBatch,
  delDefineDay
} from '@/api/businessSettings/business'
import { ref, getCurrentInstance, toRefs, reactive } from 'vue'
import { useRouter } from 'vue-router'
import uPageHeader from '../ui/u-page-header.vue'
import addFrom from './add.vue'
import editFrom from './edit.vue'
const { proxy } = getCurrentInstance()
const editForm = ref()
const data = reactive({
  isEdit: false,
  isAdd: false,
  loading: false,
  tableList: [],
  selectList: [],
  ids: [],
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 工作日
  checkedCities: [],
  cities: [
    {
      id: '1',
      name: '周一'
    },
    {
      id: '2',
      name: '周二'
    },
    {
      id: '3',
      name: '周三'
    },
    {
      id: '4',
      name: '周四'
    },
    {
      id: '5',
      name: '周五'
    },
    {
      id: '6',
      name: '周六'
    },
    {
      id: '7',
      name: '周天'
    }
  ],
  dateValue: '',
  dateOptions: []
})
const {
  checkedCities,
  cities,
  dateValue,
  dateOptions,
  loading,
  tableList,
  selectList,
  ids,
  single,
  multiple,
  isAdd,
  isEdit
} = toRefs(data)
async function init() {
  dateValue.value = getNowDate()
  for (var i = -1; i < 5; i++) {
    dateOptions.value.push(Number(dateValue.value) + i)
  }
  getWorkList(dateValue.value)
  getList(dateValue.value)
}
init()
function getNowDate() {
  const timeOne = new Date()
  const year = timeOne.getFullYear()
  const nowYear = `${year}`
  return nowYear
}
function getList(year) {
  getDefineDayList({ year: year }).then(res => {
    tableList.value = res.data
  })
}
function handleWork() {
  let data = []
  for (var i = 0; i < cities.value.length; i++) {
    if (cities.value[i].name == checkedCities.value[i]) {
      data.push({
        year: dateValue.value,
        weekday: cities.value[i].id,
        weekdayname: cities.value[i].name,
        status: 0
      })
    } else {
      data.push({
        year: dateValue.value,
        weekday: cities.value[i].id,
        weekdayname: cities.value[i].name,
        status: 1
      })
    }
  }

  getWorkdaySave({ confWorkdayList: data }).then(res => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess('添加成功!')
    }
  })
}
function addItem() {
  isAdd.value = true
}
//编辑
function editItem(row) {
  isEdit.value = true
  editForm.value = {
    id: row.id,
    dateChar: row.dateChar,
    status: row.status
  }
  console.log('editForm===', editForm)
}
//批量删除
function handleDelete() {
  const roleIds = ids.value.join(',')
  proxy
    .$confirm('是否确认删除?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(function () {
      return delDefineDayBatch({ ids: roleIds })
    })
    .then(() => {
      proxy.$modal.msgSuccess('删除成功')
      getList(dateValue.value)
    })
    .catch(() => {})
}
function delItem(row) {
  proxy
    .$confirm('是否确认删除您选中的数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(function () {
      return delDefineDay({ id: row.id })
    })
    .then(() => {
      proxy.$modal.msgSuccess('删除成功')
      getList(dateValue.value)
    })
    .catch(() => {})
}
//
function selectDateValue(val) {
  getWorkList(dateValue.value)
  getList(dateValue.value)
}
function getWorkList(val) {
  getWorkdayList({ year: val }).then(res => {
    workDayList(res.data)
  })
}
function workDayList(data) {
  if (data.length == 0) {
    let arrLists = [
      { weekday: '1', weekdayname: '周一' },
      { weekday: '2', weekdayname: '周二' },
      { weekday: '3', weekdayname: '周三' },
      { weekday: '4', weekdayname: '周四' },
      { weekday: '5', weekdayname: '周五' }
    ]
    let checks = []
    arrLists.forEach(item => {
      checks.push(item.weekdayname)
    })
    checkedCities.value = checks
  } else {
    let check = []
    data.forEach(item => {
      if (item.status != '1') return check.push(item.weekdayname)
    })
    checkedCities.value = check
  }
}
function handleCheckedCitiesChange(value) {
  let checkedCount = value.length
}
// 多选框选中数据
function handleSelectionChange(selection) {
  console.log(selection)
  selectList.value = selection
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

function closeDialog() {
  isAdd.value = false
  isEdit.value = false
}
function refreshList() {
  getList(dateValue.value)
}
function addForm(data) {
  console.log('data', data.status)
  tableList.value.push(data)
}
</script>
<style lang="scss" scoped>
.workday_box {
  display: block;
  padding: 24px;

  // height: 1000px;
}
.workday_box_tip {
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}
.workday_box_com {
  display: flex;
  vertical-align: middle;
  padding: 16px;
  border: 1px solid #eee;
  width: 100%;
  margin-top: 10px;
  height: 80px;
}
.workday_box_left {
  width: 180px;
  height: 50px;
  position: relative;
  float: left;
  display: block;
  flex: 1;
}
.workday_box_right {
  float: left;
  padding-top: 8px;
  flex: 6;
}
.workday_box_btm {
  float: left;
  padding-top: 7px;
  flex: 1;
  width: 160px;
}
</style>
